<!-- 
Copyright (c) Guangzhou Data Control Network Technology Co., Ltd. All rights reserved. 
Licensed under the MIT License.
contact:dcdev_founder@foxmail.com 
-->

<script>
    var file_menu;
    file_menu = new render_somthing();
    // 文件操作菜单
    {
        file_menu.init({
            // div的id
            id: "#file_menu",
            // x/y/flow   分别为x向滚动、y向滚动、瀑布流
            method: "x",
            // 容器是指即将渲染内容的外围容器，可以为div/table/ul ...
            container: {
                html: `
                <div style="display: flex;flex-direction: row;align-items: center;"></div>
    `
            },
            // 渲染内容的配置
            content: {
                default: `
                <div data-key="click_function" style="margin-left: 50px;white-space: nowrap;">
                    <span>#{title}</span>
                </div>
`,
            },
            callback: {
                click: function (res) {
                    if (res.key == "click_function") {
                        click_file_menu(res);
                    }
                }
            },
            // 条件渲染内容
            /*
                ^{ROW_INDEX} - 常量，表示数据数组的下标
               # {title}     - 变量，表示数据数组中对象的key
            */
            condition: [{
                    expression: "#{type}=='split'",
                    html: `
                <div style="white-space: nowrap;margin-left: 5px;margin-right: 5px;">
                    |
                </div>`
                },
                {
                    expression: "#{type}=='html'",
                    html: `
<div data-key='click_function'>#{html}</div>
`
                },
                {
                    expression: "#{img}!=undefined",
                    html: `
                <div class="btn_img" title="#{title}" data-key="click_function" style="margin-left: 5px;white-space: nowrap;">
                    <img class="btn_img" style="width:35px;height:35px;" src="#{img}" />
                </div>
                `
                }
            ],
        })

        data = [{
                type: "html",
                html: `<img title="保存" src="https://res.dcdev.net/dcdev/v1.0.8/assets/images/save.svg" style="width: 30px;margin-left: 5px;">`,
                title: "保存",
            },
            {
                type: "split"
            },
            {
                type: "html",
                html: `<img title="下载" src="https://res.dcdev.net/dcdev/v1.0.8/assets/images/download.svg" style="width: 33px;margin-left: -5px;" />`,
                title: "下载",
            },
            {
                type: "split"
            },
            {
                type: "html",
                html: `<div  title="跳转到本项目的相应页面" style="margin-left:5px;margin-right:5px;">跳转页面</div>`,
                title: "跳转页面"
            }, {
                type: "html",
                html: `<div  title="调用本项目的接口" style="margin-left:5px;margin-right:5px;">项目接口</div>`,
                title: "项目接口"
            },
            {
                type: "split"
            },
            {
                type: "html",
                html: `<img onclick="copy_url()" title="复制url"  src="https://res.dcdev.net/dcdev/v1.0.8/assets/images/link.svg" style="width: 20px;margin-left: 50px;" />`,
                title: "复制url"
            }, {
                type: "html",
                html: `<img onclick="preview_by_desktop()" title="桌面预览"  src="https://res.dcdev.net/dcdev/v1.0.8/assets/images/preview.svg" style="width: 20px;margin-left: 5px;" />`,
                title: "桌面预览"
            },
            {
                type: "html",
                html: `<img onclick="preview_by_qrcode()" title="手机预览" src="https://res.dcdev.net/dcdev/v1.0.8/assets/images/qrcode.svg" style="width: 20px;margin-left: 5px;margin-right: 5px;" />`,
                title: "手机预览"
            },

        ]

        file_menu.render(data);
    }

    function click_file_menu(res) {
        var content = get_selected_content();
        switch (res.value.title) {
            case "保存":
                save_page_code();
                break;
            case "下载":
            // 下载文件
            {
                //保存html
                function fake_click(obj) {
                    var ev = document.createEvent("MouseEvents");
                    ev.initMouseEvent("click", true, false, window, 0, 0, 0, 0, 0,
                        false, false,
                        false, false, 0, null
                    );
                    obj.dispatchEvent(ev);
                }

                function export_raw(name, data) {
                    var urlObject = window.URL || window.webkitURL || window;
                    var export_blob = new Blob([data]);
                    var save_link = document.createElementNS(
                        "http://www.w3.org/1999/xhtml", "a")
                    save_link.href = urlObject.createObjectURL(export_blob);
                    save_link.download = name;
                    fake_click(save_link);
                }
            }
            var html = `
<html>
<head>
    <meta charset="UTF-8">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <style>
        html {
            height: 100%;
        }
    
        body {
            overflow: hidden;
            height: 100%;
        }
    <\/style>
<\/head>
<script src="https://libs.baidu.com/jquery/2.0.0/jquery.min.js"><\/script> 
<body>
    ${editor.getValue()}
<\/body>
<\/html>
`
            debugger;
            export_raw(`${$(`#page_name`).val()}_${md5(project_info.pid + ($(`#page_name`).val()))}.html`, html);
            break;
        case "跳转页面":
                    //页面层
                    layer.open({
                        zIndex: 1000,
                        shade: 0,
                        title: '跳转页面',
                        type: 1,
                        skin: 'layui-layer-rim', //加上边框
                        area: ['400px', ], //宽高
                        content: $('#page_popup')
                    });
            break;
        case "项目接口":
            debugger;
            break;
        default:
            break;
        }
    }
</script>

<!-- 处理菜单点击事件 -->
<script>

</script>